<template>
  <h2>栋舍信息</h2>
  <!-- 查询条件：栋舍类型 栋舍名称 负责人 -->
  <el-form :model="form" label-width="auto" :inline="true">
    <!-- 下拉框 栋舍类型 -->
    <el-form-item label="栋舍类型：" style="width: 260px">
      <el-select v-model="form.buildingTypeId" placeholder="请选择栋舍类型">
        <el-option
          v-for="item in buildingTypeBind"
          :label="item.buildingTypeName"
          :value="item.buildingTypeId"
        />
      </el-select>
    </el-form-item>
    <!-- 文本框 栋舍名称 -->
    <el-form-item label="栋舍名称：" style="width: 240px">
      <el-input v-model="form.buildingName" />
    </el-form-item>
    <!-- 文本框 负责人 -->
    <el-form-item label="负责人：" style="width: 240px">
      <el-input v-model="form.buildingPerson" />
    </el-form-item>

    <!-- 按钮：查询 新增 -->
    <el-form-item>
      <el-button type="danger" @click="getBuildingList">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="danger" @click="add()">+新增</el-button>
    </el-form-item>
  </el-form>

  <!-- 显示数据 -->
  <el-table :data="buildingList" style="width: 100%">
    <el-table-column prop="buildingId" label="序号" />
    <el-table-column prop="buildingTypeName" label="栋舍类型" />
    <el-table-column prop="buildingName" label="栋舍名称" />
    <el-table-column prop="buildingPerson" label="负责人" />
    <el-table-column prop="buildingStaff" label="生产人员" />
    <el-table-column prop="buildingState" label="状态">
      <template v-slot="scope">
        <el-tag type="primary" v-if="scope.row.buildingState == 1">启用</el-tag>
        <el-tag type="danger" v-else>禁用</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template v-slot="scope">
        <el-link type="success" @click="commons(scope.row)">栏位管理</el-link>
      </template>
    </el-table-column>
    <!-- <el-table-column prop="date" label="创建人" />
    <el-table-column prop="name" label="创建时间" />
    <el-table-column prop="date" label="修改人" />
    <el-table-column prop="name" label="修改时间" /> -->
  </el-table>

  <!-- 对话框 栋舍信息添加 -->
  <div>
    <el-dialog v-model="dialogFormVisible" title="栋舍管理—新增" width="500">
      <el-form :model="forms">
        <!-- 下拉框 栋舍类型 -->
        <el-form-item label="栋舍类型：" :label-width="formLabelWidth">
          <el-select
            v-model="forms.buildingTypeId"
            placeholder="请选择栋舍类型"
          >
            <el-option
              v-for="item in buildingTypeBind"
              :label="item.buildingTypeName"
              :value="item.buildingTypeId"
            />
          </el-select>
        </el-form-item>
        <!-- 文本框 栋舍名称 -->
        <el-form-item label="栋舍名称：" :label-width="formLabelWidth">
          <el-input v-model="forms.buildingName" autocomplete="off" />
        </el-form-item>
        <!-- 文本框 负责人 -->
        <el-form-item label="负责人：" :label-width="formLabelWidth">
          <el-input v-model="forms.buildingPerson" autocomplete="off" />
        </el-form-item>
        <!-- 文本框 生产人员 -->
        <el-form-item label="生产人员：" :label-width="formLabelWidth">
          <el-input v-model="forms.buildingStaff" autocomplete="off" />
        </el-form-item>
        <!-- 单选框 状态 -->
        <el-form-item label="状态：" :label-width="formLabelWidth">
          <el-radio-group v-model="forms.buildingState">
            <el-radio :value="1">启用</el-radio>
            <el-radio :value="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 文本域 备注 -->
        <el-form-item label="备注：" :label-width="formLabelWidth">
          <el-input v-model="forms.buildingRenamk" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <!-- <el-button type="danger" @click="dialogFormVisible = false">保存</el-button> -->
          <el-button type="danger" @click="buildingAdd()">保存</el-button>
        </div>
      </template>
    </el-dialog>
  </div>

  <!-- 弹窗栏位管理 -->
  <div>
    <el-dialog v-model="dialogTableVisible" title="栏位管理" width="800">
      <el-form :model="fieidpage" label-width="auto" :inline="true">
        <!-- 当前栋舍 -->
        <el-form-item>
          当前栋舍：<input v-model="fieidpage.buildingName" disabled />
        </el-form-item>
        <!-- 按钮 新增栏位 -->
        <el-form-item>
          <el-button type="success" @click="AddColumns = true"
            >+新增栏位</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <el-table :data="columnsList" style="width: 250%">
        <el-table-column property="columnsId" label="序号" />
        <el-table-column property="columnsName" label="栏位名称" />
      </el-table>
      <!-- 分页 -->
      <table>
    <tr>
      <!-- 1. -->
      <td>
        <el-pagination
          v-model:current-page="fieidpage.pageIndexs"
          v-model:page-size="fieidpage.pageSizes"
          :page-sizes="[1, 3, 6, 9]"
          :size="fieidpage.pageSizes"
          :background="true"
          layout="total,slot, sizes"
          :total="fieidpage.totalCounts"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
        >
          数据，每页显示{{ fieidpage.pageSizes }}条数据，当前第1/{{
            fieidpage.pageIndexs
          }}页，共{{ fieidpage.pageCounts }}页。
        </el-pagination>
      </td>
      <!-- 2. -->
      <td>
        <el-pagination
          v-model:current-page="fieidpage.pageIndexs"
          v-model:page-size="fieidpage.pageSizes"
          :page-sizes="[1, 3, 6, 9]"
          :size="fieidpage.pageSizes"
          :background="true"
          layout="slot,prev, pager"
          :total="fieidpage.totalCounts"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
        >
          <el-button @click="handleCurrentChange1(1)">首页</el-button>
        </el-pagination>
      </td>
      <!-- 3. -->
      <td>
        <el-pagination
          v-model:current-page="fieidpage.pageIndexs"
          v-model:page-size="fieidpage.pageSizes"
          :page-sizes="[1, 3, 6, 9]"
          :size="fieidpage.pageSizes"
          :background="true"
          layout="next,slot, jumper"
          :total="fieidpage.totalCounts"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
        >
          <el-button @click="handleCurrentChange1(fieidpage.pageCounts)"
            >尾页</el-button
          >
        </el-pagination>
      </td>
    </tr>
      </table>

    </el-dialog>
  </div>

  <!-- 新增栏位 -->
  <div>
    <el-dialog v-model="AddColumns" title="新增栏位" width="500">
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="fiedldForm"
        :rules="rules"
        label-width="auto"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-form-item label="添加方式">
          <el-radio-group v-model="AddColumns1">
            <el-radio :value="true">单个新增</el-radio>
            <el-radio :value="false">批量新增</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="当前栋舍：">
          <el-input v-model="fieidpage.buildingName" disabled />
        </el-form-item>
        <el-form-item label="栏位名称：" v-if="AddColumns1" prop="columnsName">
          <el-input v-model="fiedldForm.columnsName" placeholder="请输入栏位名称" />
        </el-form-item>


        <el-form-item label="前缀：" v-if="!AddColumns1" prop="prefix">
          <el-input v-model="fiedldForm.prefix" placeholder="请输入前缀" />
        </el-form-item>
        <el-form-item label="开始编号：" v-if="!AddColumns1" prop="fieldNumber">
          <el-input v-model="fiedldForm.fieldNumber" placeholder="请输入开始编号" />
        </el-form-item>
        <el-form-item label="栏位数量：" v-if="!AddColumns1" prop="getNumber">
          <el-input v-model="fiedldForm.getNumber" placeholder="请输入栏位数量" />
        </el-form-item>
        <el-form-item label="生成栏位：" v-if="!AddColumns1">
          {{ getStartAndEnd[2]==0?'':getStartAndEnd[0] }}至{{ getStartAndEnd[2]==0?'':getStartAndEnd[1] }}
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm2">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>

  <!-- 分页 -->
  <table>
    <tr>
      <!-- 1. -->
      <td>
        <el-pagination
          v-model:current-page="form.pageIndex"
          v-model:page-size="form.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          :size="form.pageSize"
          :background="true"
          layout="total,slot, sizes"
          :total="form.totalCount"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          数据，每页显示{{ form.pageSize }}条数据，当前第1/{{
            form.pageIndex
          }}页，共{{ form.pageCount }}页。
        </el-pagination>
      </td>
      <!-- 2. -->
      <td>
        <el-pagination
          v-model:current-page="form.pageIndex"
          v-model:page-size="form.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          :size="form.pageSize"
          :background="true"
          layout="slot,prev, pager"
          :total="form.totalCount"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <el-button @click="handleCurrentChange(1)">首页</el-button>
        </el-pagination>
      </td>
      <!-- 3. -->
      <td>
        <el-pagination
          v-model:current-page="form.pageIndex"
          v-model:page-size="form.pageSize"
          :page-sizes="[5, 10, 15, 20]"
          :size="form.pageSize"
          :background="true"
          layout="next,slot, jumper"
          :total="form.totalCount"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
          <el-button @click="handleCurrentChange(form.pageCount)"
            >尾页</el-button
          >
        </el-pagination>
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted,computed } from "vue";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const dialogFormVisible = ref(false);
const dialogFormVisibles = ref(false);
const AddColumns = ref(false);
const AddColumns1 = ref(true);
const formLabelWidth = "140px";
import { ElMessage, ElMessageBox } from "element-plus";
const dialogTableVisible = ref(false);
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
//生命周期 钩子函数
onMounted(() => {
  getBuildingList(); //栋舍管理—显示
  getBuildingTypeBind(); //下拉框 栋舍类型
});

//定义变量
const form = reactive({
  buildingTypeId: "",
  buildingName: "",
  buildingPerson: "",
  buildingStaff: "",
  buildingState: 1,
  buildingRenamk: "",
  //分页
  pageIndex: 1,
  pageSize: 2,
  totalCount: 0,
  pageCount: 0,
});
const forms = reactive({
  buildingId: route.query.buildingId,
  buildingTypeId: "",
  buildingName: "",
  buildingPerson: "",
  buildingStaff: "",
  buildingState: 1,
  buildingRenamk: "",
});

//添加栏位信息
const fiedldForm = reactive({
  columnsName:'',
  buildingId: "",
  prefix: "",
  fieldNumber: "",
  getNumber: "",
});

const fieidpage = reactive({
  buildingId: "", //栋舍id
  buildingName: "", //栋舍名称
  pageIndexs: 1,
  pageSizes: 5,
  totalCounts: 0,
  pageCounts: 0,
});

//计算属性
const getStartAndEnd=computed(()=>{
  const index=Number(fiedldForm.fieldNumber);
  const names=fiedldForm.prefix.toString();
  const sumNumber=Number(fiedldForm.getNumber);
  return [names+index.toString(),names+(sumNumber+index-1).toString(),sumNumber];
})

//新增栏位验证
const rules = reactive({
  columnsName: [{ required: true, message: "请输入栏位名称", trigger: "blur" }],
  prefix: [{ required: true, message: "请输入前缀", trigger: "blur" }],
  fieldNumber: [{ required: true, message: "请输入开始编号", trigger: "blur" }],
  getNumber:[{ required: true, message: "请输入栏位数量", trigger: "blur" }],
});
//新增栏位
const submitForm2 = async (formEl: FormInstance | undefined) => {
  // if (!formEl) return;
  // await formEl.validate((valid, fields) => {
  //   if (valid) {
  //     console.log("submit!");
      
      //发送网络请求
      axios.post('http://localhost:5012/api/Buildings/ColumnsAdds',{
        columnsName: fiedldForm.columnsName,
        buildingId: fiedldForm.buildingId,
        prefix: fiedldForm.prefix,
        fieldNumber: fiedldForm.fieldNumber||0,
        getNumber:fiedldForm.getNumber||0,
      }).then(res=>{
        console.log(res);
        if(res.data.code>0){
          ElMessage.success(res.data.msg);
        }
        else{
          ElMessage.error(res.data.msg);
          return;
        }
        fiedldForm.columnsName ='';
        fiedldForm.fieldNumber ='';
        fiedldForm.getNumber ='';
        fiedldForm.prefix='';
        AddColumns.value =false;
        postColumnsList();
      }).catch(err=>{
        console.log(err);
      })

  //   } else {
  //     console.log("error submit!", fields);
  //   }
  // });
};

//弹窗栏位管理
const commons = (row:any) => {
  dialogTableVisible.value = true;
  postColumnsList();
  fieidpage.buildingName=row.buildingName
  fieidpage.buildingId=row.buildingId
  fiedldForm.buildingId=row.buildingId
  console.log(fieidpage);
};

//栏位管理-显示
const columnsList=ref([]);
const postColumnsList=()=>{
 axios.post('http://localhost:5012/api/Buildings/ColumnsLists',{
  buildingId: fieidpage.buildingId,
  buildingName: fieidpage.buildingName,
  pageIndexs: fieidpage.pageIndexs,
  pageSizes: fieidpage.pageSizes,
 }).then(res=>{
  console.log(res);
  columnsList.value=res.data.data.data;
  fieidpage.totalCounts=res.data.totalCounts;
  fieidpage.pageCounts=res.data.pageCounts;
 }).catch(err=>{
  console.log(err);
 })
}
//分页
const handleSizeChange1 = (val: number) => {
  fieidpage.pageSizes = val;
  postColumnsList();
};
const handleCurrentChange1 = (val: number) => {
  fieidpage.pageIndexs = val;
  postColumnsList();
};


//栋舍管理—显示
const buildingList = ref([]);
const getBuildingList = () => {
  axios
    .post("http://localhost:5012/api/Buildings/BuildingList", {
      buildingTypeId: form.buildingTypeId || 0,
      buildingName: form.buildingName,
      buildingPerson: form.buildingPerson,
      pageSize: form.pageSize,
      pageIndex: form.pageIndex,
    })
    .then((res) => {
      console.log(res.data.data);
      buildingList.value = res.data.data.data;
      form.pageCount = res.data.data.pageCount;
      form.totalCount = res.data.data.totalCount;
    })
    .catch((err) => {
      console.log(err);
    });
};
//分页
const handleSizeChange = (val: number) => {
  form.pageSize = val;
  getBuildingList();
};
const handleCurrentChange = (val: number) => {
  form.pageIndex = val;
  getBuildingList();
};

//下拉框 栋舍类型
const buildingTypeBind = ref([]);
const getBuildingTypeBind = () => {
  axios
    .post("http://localhost:5012/api/Buildings/BuildingTypeBind", {})
    .then((res) => {
      console.log(res);
      buildingTypeBind.value = res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

//弹窗添加
const add = () => {
  dialogFormVisible.value = true;
};
//栋舍管理—添加
const buildingAdd = () => {
  axios
    .post("http://localhost:5012/api/Buildings/BuildingAdd", {
      buildingTypeId: forms.buildingTypeId,
      buildingName: forms.buildingName,
      buildingPerson: forms.buildingPerson,
      buildingStaff: forms.buildingStaff,
      buildingState: forms.buildingState,
      buildingRenamk: forms.buildingRenamk,
    })
    .then((res) => {
      console.log(res);
      if (res.data.code == 0) {
        ElMessage.success("栋舍信息添加成功!");
        dialogFormVisible.value = false;
        getBuildingList();
      } else {
        ElMessage.error("栋舍信息添加失败!");
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>